<%--
  Created by IntelliJ IDEA.
  User: 12699
  Date: 2019/11/14
  Time: 10:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
    <script src="/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        body.* {
            font-family: "微软雅黑";
        }

        .article {
            -webkit-box-shadow: none;
            box-shadow: none;
            border-bottom: 1px solid #f0f2f7;
            margin-bottom: 0px;
            background: #fff;
            overflow: hidden;
            border-radius: 2px;
            -webkit-box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
            box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .article>.media-body>p>a {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

        .content a {
            text-decoration: none;
        }

        @media (max-width:768px) {
            form {
                display: none;
            }
            .myul {
                position: absolute;
                top: 0px;
                left: 50%;
            }
            .myul li {
                float: left;
            }
            .navbar-nav>li>ul>.dropdown-menu {
                min-width: 106px;
            }
        }
        #Live{
            color: #8590a6;
            font-size: 16px;
        }
        #Live:hover{
            color: #FFCF00;
        }
        #shudian{
            color: #8590a6;
            font-size: 16px;
        }
        #shudian:hover{
            color: #43D480;
        }
        #yuanzhuo{
            color: #8590a6;
            font-size: 16px;
        }
        #yuanzhuo:hover{
            color: #0084FF;
        }
        #zhuanlan{
            color: #8590a6;
            font-size: 16px;
        }
        #zhuanlan:hover{
            color: #0084FF;
        }
        #fufei{
            color: #8590a6;
            font-size: 16px;
        }
        #fufei:hover{
            color: #5478F0;
        }
        #row1:hover{
            background: #F6F6F6;
        }
        #row2:hover{
            background: #F6F6F6;
        }
        #row3:hover{
            background: #F6F6F6;
        }
        #row4:hover{
            background: #F6F6F6;
        }
        #row5:hover{
            background: #F6F6F6;
        }
    </style>
</head>
<body>
<c:forEach var="article" items="${sessionScope.articlesByUserList}" varStatus="status">
<div class="container article " style=" width: 694px;min-height: 265.89px;margin-top: 60px;margin-left: 200px; ">
<div class="row ">
    <div class="col-md-12 " style="margin-top: 20px; ">
        <a href=" " style="display: inline-block; font-weight: 600;font-size: 18px; text-decoration: none;width: 198px; height: 23.1px; color: black; ">${article.title}</a>
    </div>
</div>
<div class="row " style="word-wrap:break-word; word-break:break-all; ">
    <div class="media ">
        <div class="media-left ">
            <a href="# " class="media-object ">
                <img src="img/loginback.png " width="189.99px " height="105px " style="margin-top: 20px; margin-left: 20px;box-shadow: 2px 2px 2px #D4D4D4; " /></a>
        </div>
        <div class="media-body ">
            <p>
            <div class="content " style=" width: 450px;background-color:white;line-height: 26px;font-size: 15px; ">
                <a href=" " style="text-decoration: none; ">${article.content}</a>
            </div>
            </p>
        </div>
    </div>
</div>
<div class="row " style="margin-top: 10px; margin-left: -10px; ">
    <div class="col-md-2 ">
        <button id="hehe "  class="btn btn-default text-center " style="color: #0084ff;background: rgba(0,132,255,.1);border-color: transparent; font-size: 14px;border-radius: 3px; height: 31.35px; ">赞同    301</button>
    </div>
    <div class="col-md-1 ">
        <button class="btn-default " style="border:1px solid;color: #0084ff;background: rgba(0,132,255,.1);border-color: transparent;font-size: 14px;border-radius: 3px;width: 35.96px; height: 31.35px; margin-left: -25px; ">
            <span class="glyphicon glyphicon-thumbs-down "></span>
        </button>
    </div>
    <div class="col-md-2" style="width: 200px;margin-left:40px;">
        <button class="btn btn-link" style="text-decoration: none;color: #8590a6;"><span class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;${article.beclick}条评论</button>
    </div>
    <div class="col-md-2" style="width: 200px;margin-left:-90px;">
        <button class="btn btn-link" style="text-decoration: none;color: #8590a6;"><span class="glyphicon glyphicon-share-alt"></span>&nbsp;&nbsp;分享</button>
    </div>
    <div class="col-md-2" style="width: 200px;margin-left:-120px;">
        <button class="btn btn-link" style="text-decoration: none;color: #8590a6;"><span class="glyphicon glyphicon-star"></span>&nbsp;&nbsp;收藏</button>
    </div>
    <div class="col-md-2" style="width: 200px;margin-left:-120px;">
        <button class="btn btn-link" style="text-decoration: none;color: #8590a6;"><span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;感谢</button>
    </div>
</div>
</div>
</c:forEach>
</body>
</html>
